<template>
    <div class="homesNews" v-if="reload">
        <dv-border-box-11 title="物联云平台" style="padding:50px 20px;box-sizing: border-box;">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
                    <dv-border-box-8 :reverse="true" class="equimentInline" style="height: 250px;">
                        <div class="inlineTitle">设备在线率</div>
                        <dv-decoration-9 style="width:65%;height:200px;" class="font2">{{deviceOffLine}}</dv-decoration-9>
                    </dv-border-box-8>
                    <dv-border-box-7 class="equimentInline" style="margin-top: 20px;">
                        <div class="inlineTitle">建筑能耗统计</div>
                        <dv-active-ring-chart v-if="configRing.data.length>0" :config="configRing" style="width:100%;height:300px;margin: 0 auto;" />
                    </dv-border-box-7>
                </el-col>
                <el-col  :xs="24" :sm="12" :md="12" :lg="10" :xl="10" style="padding: 10px;box-sizing: border-box;">
                    <div id="table-chart" ref="chart" style="width:100%;height:270px;"></div>
                    <dv-scroll-board v-if="configSwiper2.data.length>0" :config="configSwiper2" style="width:100%;height:310px;margin-top: 0px;" />
                </el-col>
                <el-col  :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                    <dv-scroll-board v-if="configSwiper.data.length>0" :config="configSwiper" style="width:100%;height:270px" />
                    <dv-scroll-ranking-board v-if="configRanking.data.length>0" :config="configRanking" style="width:100%;height:300px;margin-top: 20px;" />

                </el-col>
            </el-row>



        </dv-border-box-11>

    </div>
</template>

<script>
    import {getHomesDataList} from  '../../../api/index';
    import bus from '../../common/bus';
    export default {
        name: "",
        data(){
            return {
                config:{
                    data: [
                        // {
                        //     name: '一月',
                        //     value: 550000
                        // },
                        // {
                        //     name: '二月',
                        //     value: 120000
                        // },
                        // {
                        //     name: '三月',
                        //     value: 710000
                        // },
                        // {
                        //     name: '四月',
                        //     value: 660000
                        // },
                        // {
                        //     name: '五月',
                        //     value: 800000
                        // },
                        // {
                        //     name: '六月',
                        //     value: 350000
                        // },
                        // {
                        //     name: '七月',
                        //     value: 150000
                        // },
                        // {
                        //     name: '八月',
                        //     value: 250000
                        // },
                        // {
                        //     name: '九月',
                        //     value: 350000
                        // },
                        // {
                        //     name: '十月',
                        //     value: 550000
                        // },
                        // {
                        //     name: '十一月',
                        //     value: 1150000
                        // },
                        // {
                        //     name: '十二月',
                        //     value: 850000
                        // }
                    ],
                    showValue: true
                },
                configRing:{
                    radius: '40%',
                    activeRadius: '45%',
                    data: [
                        // {
                        //     name: '行政办公',
                        //     value: 550000
                        // },
                        // {
                        //     name: '病区',
                        //     value: 1200000
                        // },
                        // {
                        //     name: '医技楼',
                        //     value: 780000
                        // },
                        // {
                        //     name: '综合大楼',
                        //     value: 660000
                        // },
                        // {
                        //     name: '其他',
                        //     value: 800000
                        // }
                    ],
                    digitalFlopStyle: {
                        fontSize: 20
                    },
                    showOriginValue: true
                },
                configSwiper:{
                    header: ['设备名称', '实时数据', '运行状态'],
                    data: [
                        // ['三相电表1', '185965.46', '打开'],
                        // ['三相电表2', '5.46', '打开'],
                        // ['三相电表3', '65.46', '打开'],
                        // ['三相电表4', '965.46', '打开'],
                        // ['三相电表5', '5965.46', '打开'],
                        // ['三相电表6', '0.46', '打开'],
                        // ['三相电表7', '1185965.46', '打开'],
                        // ['三相电表8', '10085965.46', '打开'],
                        // ['三相电表9', '100085965.46', '打开'],
                        // ['三相电表10', '100085965.46', '打开']
                    ],
                    rowNum:6
                },
                configSwiper2:{
                    header: ['设备名称', '告警原因', '告警时间'],
                    data: [
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12'],
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12'],
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12'],
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12'],
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12'],
                        // ['综合楼水泵房溢水保护', '<span style="color:#f00;">当前读数 142.300000。超出正常范围20.0000―110.0000。</span>', '2020/9/13 12:01:57'],
                        // ['温湿度', '<span style="color:#f00;">当前读数 41.600000。超出正常范围0.0000―40.0000。</span>', '2020/8/25 13:00:12']
                    ],
                    align: ['center'],
                    waitTime:3000,
                    carousel: 'page',
                },
                configRanking:{
                    data: [
                        // {
                        //     name: '体检科',
                        //     value: 55
                        // },
                        // {
                        //     name: '新生儿科',
                        //     value: 120
                        // },
                        // {
                        //     name: 'B超科',
                        //     value: 78
                        // },
                        // {
                        //     name: '骨科',
                        //     value: 66
                        // },
                        // {
                        //     name: '妇科',
                        //     value: 80
                        // },
                        // {
                        //     name: '男科',
                        //     value: 80
                        // },
                        // {
                        //     name: '呼吸科',
                        //     value: 80
                        // },
                        // {
                        //     name: '消化科',
                        //     value: 80
                        // },
                        // {
                        //     name: '内镜科',
                        //     value: 80
                        // },
                        // {
                        //     name: '口腔科',
                        //     value: 80
                        // }
                    ],
                    // unit: '单位',
                    rowNum:6
                },
                reload:true,
                deviceOffLine:'',
                chartData:'',
                chartTimer:null
            }
        },
        created(){
            this.getHomesDataList()
            // this.$nextTick(function () {
            //     this.echartInt(0);
            // })
            this.timerInt()

        },
        mounted() {


            bus.$once('pathChanage',(pval)=>{
                this.timerInt(pval)
            })
        },
        watch:{

        },
        methods:{
            echartInt(n){
                var div2 = this.$refs.chart;
                var myChart = this.$echarts.init(document.getElementById('table-chart'))
                var $_this = this;
                var lineWidth = {
                    normal:{
                        width:3
                    }
                };
                var animateData = {
                    color:['#FFDB5C','#32C5E9','#37A2DA','#9FE6B8','#67E0E3'],
                    series:[
                        {
                            name: '水',
                            type: 'line',
                            stack: $_this.chartData.waterUnit,//'总量',
                            data: $_this.chartData.waterHourValue,//[120, 132, 101, 134, 90, 230, 210],
                            lineStyle:lineWidth
                        },
                        {
                            name: '电',
                            type: 'line',
                            stack: $_this.chartData.elecUnit,//'总量',
                            data: $_this.chartData.elecHourValue,//[220, 182, 191, 234, 290, 330, 310],
                            lineStyle:lineWidth
                        },
                        {
                            name: '气',
                            type: 'line',
                            stack: $_this.chartData.gasUnit,//'总量',
                            data: $_this.chartData.gasHourValue,//[150, 232, 201, 154, 190, 330, 410],
                            lineStyle:lineWidth
                        },
                        {
                            name: '集中供热',
                            type: 'line',
                            stack: $_this.chartData.warmUnit,//'总量',
                            data: $_this.chartData.warmHourValue,//[320, 332, 301, 334, 390, 330, 320],
                            lineStyle:lineWidth
                        },
                        {
                            name: '集中供冷',
                            type: 'line',
                            stack: $_this.chartData.coldUnit,//'总量',
                            data: $_this.chartData.coldHourValue,//[820, 932, 901, 934, 1290, 1330, 1320],
                            lineStyle:lineWidth
                        }
                    ]
                }
                var option = {
                    title: {
                        text: $_this.chartData.energyStatisticTitle,//'2020年11月30日能耗汇总',
                        textStyle: {
                            fontWeight:'normal',
                            color: '#fff',
                        },
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:animateData.color[n],
                    // legend: {
                    //     data: [animateData.series[n].name]
                    // },
                    grid: {
                        left: '0',
                        right: '5%',
                        // bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            // saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: $_this.chartData.timeLine,//['00', '01', '02', '03', '04', '05', '06'],
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        show:false
                    },
                    series: [animateData.series[n]]
                };
                myChart.setOption(option);
            },
            getHomesDataList(){
                getHomesDataList({}).then(res=>{
                    this.deviceOffLine = res.deviceOnLineRate + '%';
                    var deviceRealData = [];

                    for(var i=0;i< res.deviceRunningList.length;i++){
                        var deviceItemRealData = []
                        deviceItemRealData[0] = res.deviceRunningList[i].deviceName;
                        deviceItemRealData[1] = res.deviceRunningList[i].realData;
                        deviceItemRealData[2] = res.deviceRunningList[i].runningState;
                        deviceRealData[i] = deviceItemRealData;
                    }
                    this.configSwiper.data = deviceRealData ;
                    console.log(this.configSwiper)
                    var warningData = [];
                    for(var n=0;n<res.deviceWarningList.length;n++){
                        var warningItemData = [];
                        warningItemData[0] = res.deviceWarningList[n].deviceName;
                        warningItemData[1] = '<span style="color:#f00;">'+res.deviceWarningList[n].warningMessage+'</span>';
                        warningItemData[2] = res.deviceWarningList[n].warningTime;
                        warningData[n] = warningItemData;

                    }
                    this.configSwiper2.data = warningData;
                    console.log(this.configSwiper2);

                    this.configRing.data = this.formatData(res.buildConsumption,'coldConsumption')
                    console.log(this.configRing)

                    this.configRanking.data = this.formatData1(res.orgConsumptionRankList,'coldRankConsumption')

                    this.chartData = res.hourEnergyStatistic;

                    this.echartInt(0);

                })
            },
            formatData(da,item){
                var demo = da[item];
                var demoArr = [] ;
                for(var i=0;i<demo.length;i++){
                    var demoObj = {};
                    demoObj['name'] = demo[i].orgName;
                    demoObj['value'] = demo[i].totalConsumption;
                    demoArr[i] = demoObj ;
                }
                return demoArr ;
            },
            formatData1(da,item){
                var demo = da[item];
                var demoArr = [] ;
                for(var i=0;i<demo.length;i++){
                    var demoObj = {};
                    demoObj['name'] = demo[i].orgName;
                    demoObj['value'] = demo[i].totalConsumption;
                    demoArr[i] = demoObj ;
                }
                return demoArr ;
            },
            timerInt(val){
                clearInterval(this.chartTimer)
                this.chartTimer = null;
                if(!val || val == '/home'){
                    var timerIndex = 0;
                    var $_that = this;
                    this.onWindowSize();
                    this.chartTimer = setInterval(function () {
                        timerIndex ++;
                        if(timerIndex>4){
                            timerIndex = 0;
                        }
                        $_that.echartInt(timerIndex)

                    },5000)
                }else{
                    clearInterval(this.chartTimer)
                    this.chartTimer = null;
                    bus.$off('windowWidth')
                }
            },
            onWindowSize(){
                //通过header组件内的监听窗口变化，重新渲染页面
                bus.$on('windowWidth',(val)=>{
                    this.echartInt(0);
                    this.reload = false;
                    this.$nextTick(function () {
                        this.reload = true;
                        this.timerInt();
                        // this.$nextTick(function () {
                        //     this.echartInt(0);
                        // })
                    })
                })
            }
        }
    }
</script>

<style scoped>
.homesNews{
    width: 100%;
    /*height: 100%;*/
    background-image: url("../../../assets/img/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.font2 {
    font-size: 28px;
    text-shadow: 0 0 3px #7acaec;
    color: #7ec699;
    font-weight: 700;
    margin: 0 auto;
}
.equimentInline{
    width: 100%;
    height: 300px;
    padding-top: 10px;
}
    .inlineTitle{
        color: #fff;
        text-align: center;
        margin-bottom: 10px;
    }
</style>